<template>
  <div>
    <button ref="code_btn" @click="getValidCode">获取验证码</button>
  </div>
</template>

<script>
export default {
  name: 'getValidCode',
  props: {
    phoneNum: String
  },
  methods: {
    getValidCode () {
      console.log('点击了一次')
      if (this.phoneNum === '') {
        console.log(5666)
        this.$emit('commitValidCode', '404')
      } else if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/).test(this.phoneNum)) {
        this.$emit('commitValidCode', '403')
      } else {
        // 发送验证码请求
        // 请求成功后，验证码往回传
        // this.$emit('commitValidCode', code)
        var time = 60
        var timer = null
        this.showTips = true
        this.$refs.code_btn.setAttribute('disabled', 'disabled')
        this.$refs.code_btn.innerHTML = time + ' 秒后重新获取'
        timer = setInterval(() => {
          time = time - 1
          this.$refs.code_btn.innerHTML = time + ' 秒后重新获取'
          if (time < 0) {
            clearInterval(timer)
            this.$refs.code_btn.innerHTML = '重新获取'
            this.$refs.code_btn.removeAttribute('disabled')
          }
        }, 1000)

        this.$emit('commitValidCode', '200')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  div
    display inline-block
    button
      background-color: #409eff
      border: 0 none
      color: #fff
      padding: 6px 16px
      cursor: pointer
      border-radius: 4px
</style>
